<template>
  <!-- 3用户抗定位 -->
  <div>
    <div class="tc">
      <div class="bg">
        <div class="title">
          预警信息
            <!-- 加一个小的关闭按钮 -->
            <i @click="closeFn" class="el-icon-close"></i>
        </div>


        <div class="body2">
          <!-- <div class="unit-info">
            <span>定位地点：</span>
            <span class="right-align">{{ showData.locationLeak }}</span>
          </div>
          <div class="unit-info">
            <span>经纬度：</span>
            <span class="right-align">({{ showData.locationLat }},{{ showData.locationLon }})</span>
          </div>
          <div class="unit-info">
            <span>泄露地点：</span>
            <span class="right-align red-text">{{ showData.locationPos }}</span>
          </div> -->
          <!-- <div class="unit-info">
            <span>定位依据：</span>
            <span class="right-align">{{ showData.locationBasis }}</span>
          </div> -->
          <el-row :gutter="10">
            <el-col :span="7">定位地点：</el-col>
            <el-col :span="17">{{ showData.locationLeak }}</el-col>
            <el-col :span="24" style="height: 5px;"></el-col>
            <el-col :span="7">经纬度：</el-col>
            <el-col :span="17">({{ showData.locationLat }},{{ showData.locationLon }})</el-col>
            <el-col :span="24" style="height: 5px;"></el-col>
            <el-col :span="7">泄露地点：</el-col>
            <el-col :span="17" class="red-text">{{ showData.locationPos }}</el-col>
          </el-row>
        </div>
        <div class="bt">
          <el-button class="bt1" @click="dialogFormVisible = true">
            抗定位
          </el-button>
          <!-- <el-button class="bt1" @click="toestimate">
            详情
          </el-button> -->
        </div>

      </div>
      <!-- 抗定位任务配置弹窗 -->
      <el-dialog class="maindialog" title="抗定位任务配置" :visible.sync="dialogFormVisible" width="800px"
                 z-index="1000">
        <el-form :model="form" ref="form">
          <el-descriptions title="风险信息" :column="2">
            <el-descriptions-item label="用户名">
              {{ showData.username }}
            </el-descriptions-item>
            <el-descriptions-item label="泄露地点">
              {{ showData.locationLeak }}
            </el-descriptions-item>
            <el-descriptions-item label="泄露坐标">
              ({{ showData.locationLat }},{{ showData.locationLon }})
            </el-descriptions-item>
            <el-descriptions-item label="定位地点">
              {{ showData.locationPos }}
            </el-descriptions-item>
          </el-descriptions>
          <el-form-item label="抗定位方式：" :label-width="formLabelWidth" prop="method">
            <el-radio v-model="form.method" label="社交内容混淆">社交内容混淆</el-radio>
            <el-radio v-model="form.method" label="社交关系混淆">社交关系混淆</el-radio>
          </el-form-item>
          <el-form-item label="设置混淆后位置：" :label-width="formLabelWidth" prop="targetLocation">
            <el-input v-model="form.targetLocation" style="width: 190px" placeholder="请输入想要混淆到的地点"/>
          </el-form-item>
        </el-form>

        <el-alert title="该操作会修改用户社交内容与社交关系，请谨慎操作！" type="warning" show-icon
                  style="width: 250px; position: relative; left: 400px; top: -70px"/>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="submitForm">
            确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog class="maindialog2" :visible.sync="dialogDetails" width="30%" z-index="10000">
      <template #title>
        <div style="font-weight:bold;font-size:20px;color: #fff;text-align: center;">
          新建用户抗定位任务
        </div>
      </template>
      <span class="dialogDetailstext">新建用户抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {addTask} from '@/api/combatUser/antiLocalization'

export default {
  props: {
    initData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    'initData': function (val) {
      this.showData = val.params;
      console.log('showDatashowDatashowData', this.showData);
    }
  },
  data() {
    return {
      showData: {},
      dialogFormVisible: false,
      dialogDetails: false,
      input: "",
      form: {
        method: "社交内容混淆", //混淆类型
        targetLocation: '',//混淆后位置
        id:''
      },
      formLabelWidth: "180px",
    };
  },
  methods: {
    closeFn(){
      this.$emit('closeFn')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.id=this.showData.id
          this.form.warnid=this.showData.id
          addTask(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            //路由跳转
            this.dialogFormVisible = false;
            this.$router.push('/networkUser/antiLocalization')
          });
        }
      });
    },
    showDetails() {
      this.dialogFormVisible = false;
      this.dialogDetails = true;
    },
    toestimate() {
      this.$router.push("/userestimate");
    },
  },
  mounted() {

  }
};
</script>

<style scoped>
.body2 {
  width: 100%;
  /* position: absolute; */
  padding: 10px;
  color: #90CEE9;
  font-size: 16px;
}

.tc {
  position: absolute;
  bottom: 50%;
  right: 25%;
  width: 350px;
  height: 200px;
  z-index: 10000;
}

.bg {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: 7px;
  text-align: left;
  font-style: normal;
  text-align: center;
  padding: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}

.bt {
  position: absolute;
  top: 80%;
  right: 10%;
  text-align: center;
  .bt1 {
    font-size: 13px;
    width: 80px;
    height: 30px;
    background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
    border-radius: 2px 2px 2px 2px;
    border: none;
    color: #fff;
    text-align: center;
    line-height: 11px;
  }
}

.dialog-footer {
  text-align: center;

  .el-button {
    font-size: 13px;
    width: 100px;
    background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
    border-radius: 2px 2px 2px 2px;
    border: none;
    color: #fff;
    text-align: center;
  }
}

.dialogDetailstext {
  font-size: 18px;
  font-weight: bolder;
  color: #fff;
}

.maindialog {
  .el-dialog__body {
    .el-descriptions__body {
      font-size: 17px
    }

    .el-checkbox__label {
      font-size: 18px;
      color: #fff;
    }

    .el-form-item__label {
      position: absolute;
      /* left: 5px; */
      width: 0;
      text-align: left;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.red-text {
  color: red;
}
</style>
